<template>
  <div class="Scalelmg" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
    <div class="drag-outer" style="position: relative" ref="dragWrap" :style="'width:' + imgWidth"
      @mouseenter="isHover = true" @mouseleave="isHover = isMousedown = false" @mousemove="dragMousemove"
      @mousewheel.stop="handleScroll">
      <div class="drag-inner" ref="dragElement" @mousedown="dragMousedown" @mouseup.stop="isMousedown = false">
        <div class="coordinate">
          <div class="cad">
            <el-tooltip style="position: absolute" effect="dark" v-for="(item, index) in ChuanGanQiListData"
              :key="index + 'ChuanGanQiListData'" class="WenDuClass1">
              <div slot="content" class="WenDuClass">
                <div><span>传感器编号 : </span>{{ item.sysNum }}</div>
                <div>
                  <span>传感器类型 : </span>{{ item.SRTDT_SensorStyle }}
                </div>
                <div><span>传感器单位 : </span>{{ item.SRTDT_Unit }}</div>
                <div><span>传感器状态 : </span>{{ item.SIIT_AlarmStatus }}</div>
                <div>
                  <span>传感器位置 : </span>{{ item.SRTDT_InstallLoction }}
                </div>
                <div>
                  <span>传感器数值 : </span>{{ item.SRTDT_MonitorValue }}
                </div>
              </div>
              <div class="tongdao_item" style="position: absolute" :style="{
    top: item.Y + 'px',
    left: item.X + 'px',
  }" @click="buleKuai(item)">
                <img :src="ChuanGanQiGetImgUrl(item.imgaddress)" alt="" />
              </div>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
    <div class="keyboard">
      <el-tooltip class="item" effect="dark" content="向上移动" placement="top-start">
        <div @click="item.Y -= 0.5" @mousedown="anxiatop" @mouseup="likaitop" @mouseleave="likaitop">
          <img src="../../assets/HomePage_iconfont/上箭头.png" alt="" />
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="向下移动" placement="top-start">
        <div @click="item.Y += 0.5" @mousedown="anxiabootom" @mouseup="likaibottom" @mouseleave="likaibottom">
          <img src="../../assets/HomePage_iconfont/下箭头.png" alt="" />
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="向左移动" placement="top-start">
        <div @click="item.X -= 0.5" @mousedown="anxialeft" @mouseup="likaileft" @mouseleave="likaileft">
          <img src="../../assets/HomePage_iconfont/左箭头.png" alt="" />
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="向右移动" placement="top-start">
        <div @click="item.X += 0.5" @mousedown="anxiaright" @mouseup="likairight" @mouseleave="likairight">
          <img src="../../assets/HomePage_iconfont/右箭头.png" alt="" />
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="移动传感器后保存位置" placement="top-start">
        <div @click="BaoCunWeiZhi">
          <img src="../../assets/HomePage_iconfont/保存.png" alt="" />
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="退出到登录" placement="top-start">
        <div @click="Exit">
          <img src="../../assets/HomePage_iconfont/进入.png" alt="" />
        </div>
      </el-tooltip>
      <div @click="screen" class="quanping">
        <el-tooltip class="item" effect="dark" :content="!$store.state.system.isFullScreen ? '全屏' : '关闭全屏'"
          placement="top-start">
          <img src="../../assets/全屏.png" alt="" v-if="!$store.state.system.isFullScreen" />


          <img src="../../assets/关闭全屏.png" alt="" v-if="$store.state.system.isFullScreen" />
        </el-tooltip>
      </div>
    </div>

  </div>
</template>

<script>
import {
  ShouyeChuanGanQiImg,
  ShouyeChuanGanQiImgWeiZhiBaoCun,
} from "../../https/api/user";
import screenfull from "screenfull";
export default {
  name: "index",
  props: {
    imgWidth: {
      type: String,
      default() {
        return "100%";
      },
    },
    scaleZoom: {
      type: Object,
      default() {
        return {
          max: 10,
          min: 0.5,
        };
      },
    },
  },

  data() {
    return {
      isQuanPing: false,
      intervalId: null,
      isMousedown: false,
      isHover: false,
      moveStart: {},
      translate: { x: 0, y: 0 },
      scale: 1,
      item: {},
      ChuanGanQiListData: [],
      leftTimer: null,
      rightTimer: null,
      upTimer: null,
      downTimer: null,
      time: "",
    };
  },
  created() {
    document.addEventListener('keydown', this.handleKeyDown);
    document.addEventListener('keyup', this.handleKeyUp);
    this.$nextTick(() => {
      window.addEventListener("mousewheel", this.handleScroll, false);
    });
  },
  mounted() {

    this.ShouyeChuanGanQiImage();
    this.$nextTick(() => {
      window.addEventListener("mousewheel", this.handleScroll, false);
    });
    this.time = setInterval(() => {
      this.ShouyeChuanGanQiImage();
    }, 10000);
  },

  methods: {
    handleKeyDown(event) {
      const { keyCode } = event;
      switch (keyCode) {
        case 37: // 左键
          this.leftTimer = setTimeout(() => {
            // 长按后的处理逻辑
            this.item.X -= 0.5
            console.log('左键长按');
          }, 10);
          break;
        case 39: // 右键
          this.rightTimer = setTimeout(() => {
            // 长按后的处理逻辑
            this.item.X += 0.5
            console.log('右键长按');
          }, 10);
          break;
        case 38: // 上键
          this.upTimer = setTimeout(() => {
            // 长按后的处理逻辑
            this.item.Y -= 0.5
            console.log('上键长按');
          }, 10);
          break;
        case 40: // 下键
          this.downTimer = setTimeout(() => {
            // 长按后的处理逻辑
            this.item.Y += 0.5
            console.log('下键长按');
          }, 10);
          break;
        default:
          break;
      }
    },
    handleKeyUp(event) {
      const { keyCode } = event;
      switch (keyCode) {
        case 37: // 左键
          this.clearTimer(this.leftTimer);
          break;
        case 39: // 右键
          this.clearTimer(this.rightTimer);
          break;
        case 38: // 上键
          this.clearTimer(this.upTimer);
          break;
        case 40: // 下键
          this.clearTimer(this.downTimer);
          break;
        default:
          break;
      }
    },
    clearTimer(timer) {
      if (timer) {
        clearTimeout(timer);
        this.leftTimer = null;
      }
    },
    clearTimers() {
      this.clearTimer(this.leftTimer);
      this.clearTimer(this.rightTimer);
      this.clearTimer(this.upTimer);
      this.clearTimer(this.downTimer);
    },
    screen() {
      // 如果不允许进入全屏，发出不允许提示
      if (screenfull.isEnabled) screenfull.toggle();
      this.$store.commit("SET_ISFULLSCREEN");
      // console.log(screenfull, this.$store.state.system.isFullScreen);
    },
    ChuanGanQiGetImgUrl(img) {
      // console.log(img);
      if (img) {
        return require("../../assets/CadChuanGanQiTuBiao/" + img);
      }
    },
    buleKuai(item) {
      if (item) {
        this.item = item;
      }
    },
    ShouyeChuanGanQiImage() {
      const data = {
        s: 1,
      };
      ShouyeChuanGanQiImg(data).then((res) => {
        console.log("首页传感器显示cad", res);
        if (res) {
          this.ChuanGanQiListData = res;
        }
      });
    },
    handleMouseEnter() {
      clearInterval(this.time);
    },
    handleMouseLeave() {
      this.time = setInterval(() => {
        this.ShouyeChuanGanQiImage();
      }, 1000);
    },
    BaoCunWeiZhi() {
      ShouyeChuanGanQiImgWeiZhiBaoCun(this.ChuanGanQiListData).then((res) => {
        if (res) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
        }
      });
    },
    anxialeft() {
      this.intervalId = setInterval(() => {
        this.item.X -= 0.5;
      }, 200);
    },
    likaileft() {
      clearInterval(this.intervalId);
    },
    anxiaright() {
      this.intervalId = setInterval(() => {
        this.item.X += 0.5;
      }, 200);
    },
    likairight() {
      clearInterval(this.intervalId);
    },
    anxiatop() {
      this.intervalId = setInterval(() => {
        this.item.Y -= 0.5;
      }, 200);
    },
    likaitop() {
      clearInterval(this.intervalId);
    },
    anxiabootom() {
      this.intervalId = setInterval(() => {
        this.item.Y += 0.5;
      }, 200);
    },
    likaibottom() {
      clearInterval(this.intervalId);
    },
    buleKuai(item) {
      console.log("块块", item);
      if (item) {
        this.item = item;
      }
    },
    Exit() {
      this.$router.push({ path: "/login" });
    },
    handleScroll(e) {
      // console.log(this.$refs.dragElement);
      // 滚轮事件
      if (e) {
        if (this.isHover) {
          // console.log(e.wheelDelta);
          let speed = e.wheelDelta / 120;
          if (e.wheelDelta > 0 && this.scale < this.scaleZoom.max) {
            // console.log(this.this.$refs.dragElement);
            this.scale += 0.2 * speed;
            this.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`;
          } else if (e.wheelDelta < 0 && this.scale > this.scaleZoom.min) {
            this.scale += 0.2 * speed;
            this.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`;
          }
        }
      }
    },
    dragMousedown(e) {
      // 鼠标摁下\
      if (e) {
        this.moveStart.x = event.clientX;
        this.moveStart.y = event.clientY;
        this.isMousedown = true;
      }
    },
    //
    dragMousemove(e) {
      e.preventDefault();
      // 鼠标移入事件  然后拖拽
      if (e) {
        if (this.isMousedown) {
          this.translate.x += (event.clientX - this.moveStart.x) / this.scale;
          this.translate.y += (event.clientY - this.moveStart.y) / this.scale;
          this.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`;
          this.moveStart.x = event.clientX;
          this.moveStart.y = event.clientY;
        }
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.time);
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/deep/.el-tooltip {
  padding: 0;
  margin: 0;
}

.tongdao_item:hover .show {
  display: inline-block;
}

.Scalelmg {
  width: 100%;
  height: 100%;
  //   border: 1px solid red;
}

/*最外层透明*/

.drag-outer {
  overflow: hidden;
  width: 100%;
  height: 95%;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;

  .drag-inner {
    // 缩放的容器
    transform-origin: center center;
    cursor: move;
    user-select: none;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    // border: 1px solid red;
  }
}

.coordinate {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  color: white;
  user-select: none;
  cursor: pointer;
  background-color: rgb(255, 255, 255, );
}

.tongdao_item {
  width: 1.7%;
  height: 2.4%;
  position: relative;
  user-select: none;

  // background-color: white;
  img {
    max-width: 120%;
    max-height: 120%;
  }
}

.WenDuClass {
  width: 200px;

  // border: 1px solid red;
  div {
    margin: 0 0 3px 0;
    color: white;

    >span {
      color: rgb(3, 131, 134);
      font-weight: 600;
      margin-right: 2px;
    }
  }
}

// .WenDuClass1:focus {
//   // background-color: green;
//   // border: 2px solid #ccc;
// }
/deep/.el-tooltip {
  padding: 0;
  margin: 0;
}

.cad {
  width: 100%;
  height: 100%;
  // background-color: saddlebrown;
  background-image: url("../../assets/bac.png");
  // border: 1px solid #ccc;
  // background-color: rgba(255, 255, 255, 0);
  background-size: 100% 100%;
  // opacity: 0.4;
}

.keyboard {
  width: 100%;
  height: 5%;
  display: flex;
  align-items: center;
  padding: 0 10px;
  // border: 1px solid red;
  background-image: url("../../assets/keyboard.png");

  :hover {
    //    background: linear-gradient(to bottom, rgb(1,8,62) 60%,rgb(61,141,217,40%));
    background-color: rgb(5, 17, 29);
  }

  >div {
    width: 4%;
    height: 95%;
    margin-right: 7px;

    img {
      width: 100%;
      height: 100%;
      // border: 2px solid rgb(8, 52, 112);
    }
  }
}
</style>
